<template>
  <view
      class="product-container"
      :style="{borderBottom:props.isShowBorderBottom ? '1rpx solid #c8c9c2' : ''}"
  >
    <view class="header-container flex justify-between items-center">
      <view class="product-name">{{props.crowdProduct.skuName}}</view>
      <view class="other-info-container flex items-center">
        <view class="price">￥{{props.crowdProduct.price}}</view>
        <view class="stepper-container flex items-center">
          <i class="iconfont icon-jian" @click="handleChange('decrement')"></i>
          <text class="pl20 pr20">{{props.crowdProduct.number}}</text>
          <i class="iconfont icon-jia1" @click="handleChange('increment')"></i>
        </view>
      </view>
    </view>
    <view class="rule-container flex`">
      <view
          class="rule-item"
          v-for="(item,index) in props.rules"
      >
        {{item}}
        <text
            v-if="index !== props.rules.length - 1"
            class="pl10 pr10"
        >I</text>
      </view>
    </view>
    <view class="crowd-notice">
      <view class="title">使用人群说明：</view>
      <view class="notice-content">成人票：年龄19周岁(含)~59周岁(含)(按生日计算年龄，以出行日期为准);持有浙江台州、浙江嘉兴、浙江杭州</view>
    </view>
  </view>
</template>

<script setup>
  const props = defineProps({
    buyNumber: {
      type: Number,
      default: 1
    },
    rules:{
      type: [],
      default: ['随买随用','无需取票','携带身份证','购买须知']
    },
    isShowBorderBottom: {
      type:Boolean,
      default: true
    },
    crowdProduct: {
      type:Object,
      default: {}
    }
  });

  const emits = defineEmits(["productNumberOperation"]);

  const handleChange = (type) => {
    emits("productNumberOperation",{type});
  };
</script>

<style lang="scss" scoped>
  .product-container {
    padding: 47rpx 0 30rpx 0;
    //border-bottom: 1rpx solid #c8c9c2;
    .header-container {
      font-size: 33.5rpx;
      .product-name {
        font-weight: bold;
      }
      .other-info-container {
        .price {
          color: #AA5413;
          padding-right: 26rpx;
          font-weight: bold;
        }
        .stepper-container {
          .iconfont {
            color: #3d3d37;
            font-size:50rpx;
          }
        }
      }
    }
    .rule-container {
      font-size: 22.5rpx;
      padding: 33rpx 0 30rpx 0;
    }
    .crowd-notice {
      font-size: 22.5rpx;
      padding-top: 20rpx;
      .title {
        padding-bottom: 30rpx;
      }
    }
  }
</style>
